import React, { useState, useEffect } from 'react';
import './index.less';
import { AudioOutlined } from '@ant-design/icons';
import { Input, Space } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import axios from 'axios';
import '../iconfont/iconfont.css';
import { Button, Modal } from 'antd';
import { history, request } from 'umi';
import one from '../img/one.png';

export default function index() {
  // const { Search } = Input;
  let [state, setState] = useState(false);
  let [username, setUsename] = useState('admin');
  let [password, setPassword] = useState('123');

  const suffix = (
    <AudioOutlined
      style={{
        fontSize: 16,
        color: '#1890ff',
      }}
    />
  );
  const onSearch = (value: string) => console.log(value);
  // let Changeusername = (e) => {
  //   console.log(e);
    
  //   setUsename(e.target.value);
  // };
  // let Changepassword = (e) => {
  //   console.log(e.target.value);

  //   setPassword(e.target.value);
  // };

  let loginset = () => {
    console.log("开始登陆");
    
    request('/api/bjl/login', {
      method: 'post',
      data: { username, password },
    }).then((res) => {
      console.log(333333);

      if (res.code === 200) {
        localStorage.setItem('koten', res.token);
        history.push('/welcome');
      } else {
        showModal();
      }
    });
  };
  
  //点击登录提示框
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <div className="login">
      <div className="login_div">
        <div className="login_img"></div>
        <div className="login_title">
          <div className="login_top">
            <img
              src={
                'https://erpdemo.fanpusoft.com/Images/Logo/637520963340736067_637518569831196922_logo.png'
              }
              width=" 30px"
              alt=""
            />
          </div>
          <div className="login_input">
            <ul>
              <li>
                <Input
                  value={username}
                  // onChange={Changeusername}
                  style={{ width: '100%', height: '100%' }}
                  placeholder="请输入用户名"
                  prefix={<UserOutlined />}
                />
              </li>
              <li>
                <Input
                  value={password}
                  // onChange={Changepassword}
                  style={{ width: '100%', height: '100%' }}
                  placeholder="请输入密码"
                  prefix={<LockOutlined />}
                />
              </li>
              <li>
                <button onClick={loginset}>立即登录</button>
              </li>
            </ul>
          </div>
          {/*点击弹框  */}
          <Modal
            title="提示对话框"
            open={isModalOpen}
            onOk={handleOk}
            onCancel={handleCancel}
            maskClosable={false}
            footer={
              [
                <Button
                  className="back_button"
                  key="back"
                  onClick={handleCancel}
                >
                  确定
                </Button>,
              ] // 设置footer为空，去掉 取消 确定默认按钮
            }
          >
            <div className="model_tan">
              <div>
                <img src={one} alt="" />
              </div>
              <span>用户名或密码错误</span>
            </div>
          </Modal>

          {/*  */}
          <div className="tips">
            警告:本软件受中国专利法与国际公约保护,未经授权擅自复制全部或部分内容,将接受法律的严厉惩罚! V.20221024
          </div>
        </div>
      </div>
    </div>
  );
}
